<template>
  <div  :class="theme" class="nav-bottom-bar c-justify-sa c-fc-gray c-fs20">
    <a class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center" :class="[itemIndex == 0 ? 'c-fc-lblue':'', hoverClass]" @click="clickGoIndex">
      <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-end">
        <i v-if="itemIndex==0" class="iconfont c-fs32">&#xe8f1;</i>
        <i v-else class="iconfont c-fs32">&#xee13;</i>
      </div>
      <span>首页</span>
    </a>

    <a class="c-flex-column c-flex-grow1 c-textAlign-c c-cursor-p c-aligni-center" :class="[itemIndex == 1 ? 'c-fc-lblue':'', hoverClass]" @click="clickGoMine">
      <div class="c-ww32 c-hh32 c-flex-row c-aligni-center c-justify-end">
        <i v-if="itemIndex==1" class="iconfont c-fs32">&#xe814;</i>
        <i v-else class="iconfont c-fs32">&#xe7f3;</i>
      </div>
      <span>我的</span>
    </a>
  </div>
</template>

<script>
export default {
  props: {
    itemIndex: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      navList: [],
      itemIndex: 0
    }
  },
  methods:{
    clickGoIndex(e) {
      this.itemIndex = 0
      if (this.itemIndex != 0) {
        this.$routerGo(this, "push", { path: "/fashou/activity" });
      }
    },
    clickGoMine: function (e) {
      this.itemIndex = 1
      if (this.itemIndex != 1) {
        this.$routerGo(this, "push", { path: "/fashou/personalCenter" });
      }
    },
  }
}
</script>

<style scoped>

.nav-bottom-bar {
  position: fixed;
  bottom: 0;
  background: #fff;
  height: 2rem;
  z-index: 90;
  max-width: 640px;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  border-top: 1px solid #f2f2f2;
}
</style>